<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0  maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>费用查询</title>
    <script type="text/javascript" src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"    crossorigin="anonymous"></script>
    <style>
        body {
            background-color: #eff3f6;
        }
        .bgc {width: 100%;height: 200px;
            background-image: url(/static/images/11.png);background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        .left {
            position: absolute;
            top: 32px;
            left: 10px;
            color: #fff;
            font-size: 24px;
        }
        .addHouse {
            position: absolute;
            top: 27px;
            left: 45px;
            color: #fff;
            font-size: 24px;
            font-weight: 300;
        }
        .input-group {
            border-bottom: 1px solid #eff3f6;
            background-color: #fff;
        }
        .input-group-addon {
            border: none;
            background-color: #fff !important;
        }
        .form-control {
            border: none;

        .money {
            position: absolute;
            top: 10px;
            right: 17px;
            color: #555;
            font-size: 16px;
        }
        .bjt {
            width: 100%;
            height: 280px;
            background-color: #eff3f6;
            padding-top: 30px;
            padding-left: 30px;
            padding-right: 30px;
            position: relative;
        }
        #father {
            list-style: none;
            display: flex;

            justify-content: space-around;

            padding-left: 0;

            flex-wrap: wrap;

        }


        #father .son {

            width: 30%;

            border: 1px solid #ccc;

            font-size: 24px;

            text-align: center;

            padding: 10px;

            color: #555;

        }


        li:nth-child(2) {

            margin-left: 10px;

            margin-right: 10px;

        }


        li:nth-child(5) {

            margin-left: 10px;

            margin-right: 10px;

        }


        .active {

            color: #ff3366 !important;

            border: 1px solid #ff3366 !important;

        }

        .mustMoney {

            position: absolute;

            bottom: 10%;

            left: 50%;

            transform: translate(-50%, -50%);

            padding: 5px 80px;

            border-radius: 4px;

        }


        .input-group text {

            font-size: 16px;

            line-height: 50px;

            float: right;

            padding-right: 16px;

        }

        .red {

            color: red

        }

    </style>

</head>


<body>

<div class="bgc"></div>

<div>

    <span class="glyphicon glyphicon-menu-left left"></span>

    <span class="addHouse">余额查询</span>

</div>

<div class="input-group input-group-lg">

    <span class="input-group-addon" id="basic-addon1">房间地址</span>

    <!-- <input type="text" class="form-control" placeholder="请输入房屋地址" aria-describedby="basic-addon1"

        style="border-top:none; text-align: right;"> -->

    <text>{$room['hr_city'].$room['bc_name'].$room['rq_name'].$room['hr_storey'].'-'.$room['hr_house_area'].'-'.$room['hr_house_number'].'-'.'号房间'}</text>

</div>

<div class="input-group input-group-lg">

    <span class="input-group-addon" id="basic-addon1">电费单价</span>

    <text>{$room['tenant_sex'].'元/度'}</text>

</div>

<div class="input-group input-group-lg">

    <span class="input-group-addon" id="basic-addon1">账户余额</span>

    <text id="zhanghu">{$room['tenant_balance']}元</text>

</div>

<div class="input-group input-group-lg">

    <span class="input-group-addon" id="basic-addon1">选择金额</span>

    <span class="money">100元</span>

</div>

<div class="bjt">

    <ul id="father">

        <li class="son">10元</li>

        <li class="son">30元</li>

        <li class="son">50元</li>

        <li class="son" style="margin-top: 20px;" id="son4">100元</li>

        <li class="son" style="margin-top: 20px;">150元</li>

        <li class="son" style="margin-top: 20px;">200元</li>

    </ul>

    <button type="button" class="btn btn-danger mustMoney" id="li">立刻充值</button>

</div>

</body>

<script>

    $(function () {

        $(".money").html('100元')

        $("#son4").addClass("active")

        var mm = ''

        $(".son").click(function () {

            $(this).addClass("active").siblings("li").removeClass("active");

            console.log(this)

            let value = $(this).html()

            let a = value.split('元', 2)

            console.log(a)

            money = a[0]

            mm = money

            console.log('111', mm)

            $('.money').html(value)

        });

        $("#li").click(function () {

            if (mm == '') {

                mm = 100

            }

            mm = mm * 100

            mm = 1

            console.log(mm)

            if (typeof WeixinJSBridge == "undefined") {

                if (document.addEventListener) {

                    document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);

                } else if (document.attachEvent) {

                    document.attachEvent('WeixinJSBridgeReady', jsApiCall);

                    document.attachEvent('onWeixinJSBridgeReady', jsApiCall);

                }

            } else {

                jsApiCall(mm);

                console.log(1111)

            }

        })

        let yue = $('#zhanghu').text()

        var arr = yue.split('元', 2)

        var a = parseFloat(arr[0])

        if (a < 10) {

            $('#zhanghu').addClass('red')

        } else {

            $('#zhanghu').removeClass('red')

        }

    });


    //调用微信JS api 支付

    function jsApiCall(mm) {

        var money = $('#money').val()

        $(function () {

            var aa = '';

            $.ajax({

                type: 'post',

                dataType: 'json',

                data: {'total_fee': mm, 'openid': '{$userinfo['openid']}', 'tyt_id': '{$room['r_id']}'},

                url: 'http://wx.taoyuanapartment.com/postaddorder',

                success: function (data) {

                    //alert(data.msg);

                    if (data.code == 0) {

                        WeixinJSBridge.invoke(
                            'getBrandWCPayRequest',

                            JSON.parse(data.data),

                            function (res) {

                                if (res.err_msg == "get_brand_wcpay_request:ok") {

                                    // 支付成功

                                    $(function () {

                                        $.ajax({

                                            type: 'post',

                                            dataType: 'json',

                                            data: data,

                                            url: '__PUBLIC__/wx/api/order',

                                            success: function (arr) {

                                                alert(arr.msg);

                                                if (res.code == 0) {

                                                    window.location.href = "{$url}";

                                                }

                                            },

                                            error: function () {

                                                alert('123');

                                            }

                                        });

                                    })

                                }

                                if (res.err_msg == "get_brand_wcpay_request:cancel") {

                                    // 取消支付

                                    alert('用户取消支付');

                                }

                                if (res.err_msg == "get_brand_wcpay_request:fail") {

                                    // 支付失败

                                    alert('用户支付失败');

                                }

                                WeixinJSBridge.log(res.err_msg);

                                //alert(res.err_code+res.err_desc+res.err_msg);

                            }
                        );

                    } else {

                        alert('请将一下信息截图发送客服：' + data.code + data.msg);

                    }

                },

                error: function () {

                    alert('失败');

                }

            });

        });

    }


    //     function callpay(){


    // alert(mm)

    //         if (typeof WeixinJSBridge == "undefined"){

    //             if( document.addEventListener ){

    //                 document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);

    //             }else if (document.attachEvent){

    //                 document.attachEvent('WeixinJSBridgeReady', jsApiCall);

    //                 document.attachEvent('onWeixinJSBridgeReady', jsApiCall);

    //             }

    //         }else{

    //             jsApiCall();

    //         }

    //     }

</script>


</html>